<script setup lang="ts" name="trade">
import { onMounted, ref } from 'vue';
import { useRequest } from 'vue-request';
import PickeDate from './PickeDate.vue';
import { getDistributionInfo, getDistributionPage } from '/@/apis/userApi';
import { useUserId } from '/@/hooks';
const { getUserId } = useUserId();
const userId = getUserId();
const teamInfo = ref(<any>{});
  const dataList = ref<any[]>([]);
const onPickeDate = (data: any) => {
  params.value.startTime =  data[0];
  params.value.endTime =  data[1];
  params.value.current = 1;
  dataList.value = [];
  onLoadData();
}
const params = ref({ 
  memberId: userId,
  current: 1,
  size: 10,
  startTime: '',
  endTime: '',
});
const finished = ref(false);
const loading = ref(false);
const getData = () => {
  loading.value = true;
  useRequest(getDistributionPage, {
    defaultParams: [params.value],
    onSuccess(result: any) {
      loading.value = false;
      if (result.data.length != params.value.size) {
        finished.value = true;
      } else {
        params.value.current++;
      }
      dataList.value = dataList.value.concat(result.data)
    },
    onError() {
      finished.value = true;
      dataList.value = [];
    }
  })
}
const onLoadData = () => {
  finished.value = false;
  getData();
}
useRequest(getDistributionInfo, {
  defaultParams: [{ memberId: userId,}],
    onSuccess(result: any) {
      teamInfo.value = result;
    },
    onError() {
    
    }
  })
onMounted(() => {
  onLoadData();
});
</script>
<template>
  <div class="teams">
    <div class="gains-box">
      <div class="box">
        <div>
          <p class="p1">{{ teamInfo.one }}</p>
          <p class="p2">{{ $t('Tieronegains') }}</p>
        </div>
      </div>
      <div class="box">
        <div>
          <p class="p1">{{ teamInfo.two }}</p>
          <p class="p2">{{ $t('Tiertwogains') }}</p>
        </div>
      </div>
      <div class="box">
          <div>
            <p class="p1">{{ teamInfo.three }}</p>
            <p class="p2">{{ $t('Tierthreegains') }}</p>
          </div>
      </div>
    </div>
    <div class="title">
         {{ $t('History') }}
    </div>
    <div class="full-benefits">{{ $t('Fullbenefits') }}: <span class="bold">+ {{ teamInfo.one + teamInfo.two + teamInfo.three }}</span></div>
    <div>
      <PickeDate @click="onPickeDate"></PickeDate>
    </div>
    <div class="teams-list">
      <van-list v-if="dataList.length"  v-model:loading="loading" :finished="finished" :finished-text="dataList.length ? $t('list_load_finished') : ''" :loading-text="$t('list_loading')" @load="onLoadData">
      <div class="li" v-for="item in dataList" :key="item.id">
        <div class="icon-box">
          <Icon name="icon-fenyong"></Icon>
        </div>
        <div class="right-box">
          <div class="flex-between">
            <p class="p1">{{ $t('Rechargecommission') }}</p>
            <p class="p2"> +${{ item.commission }}</p>
          </div>
          <div class="flex-between mt-20">
            <p class="green red gray"> {{ $t('Success') }}</p>
            <p class="p3">{{ $YMDHms(item.createDate) }}</p>
          </div>
        </div>
      </div>
      </van-list>
      <van-empty v-else :description="$t('Nodata')" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.teams {
  margin-top: 30px;
  height: 100%;
  .gains-box {
    border-radius: 15px;
    background: rgb(0, 99, 245);
    color: #fff;
    display: flex;
    padding: 48px 12px 47px 26px;
    justify-content: space-between;
    margin-bottom: 22px;
    .box {
      border-right: 2px solid rgba(255, 255, 255, 0.3);
      width: 33.3%;
      display: flex;
      justify-content: center;
      &:last-child {
        border: 0;
      }
      .p1 {
         font-size: 36px;
         font-weight: 700;
         margin-bottom: 20px;
      }
      .p2 {
        font-size: 26px;
      }
    }
  }
  .title {
      font-size: 40px;
      font-weight: 500;
    }
    .full-benefits {
      font-size: 30px;
      color: rgba(255, 255, 255, 0.65);
      margin: 20px 0;
      .bold {
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
      }
    }
  .teams-list {
    margin-top: 22px;
  

    .li {
      display: flex;
      background: #242424;
      border-radius: 16px;
      padding: 37px 25px 34px 22px;
      margin-bottom: 20px;

      .icon-box {
        background: rgb(0, 99, 245, 0.15);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        @include center;
        margin-right: 10px;
        color: #0063f5;

      }

      .mt-20 {
        margin-top: 20px;
      }

      .right-box {
        width: 85%;
      }

      .p1 {
        font-size: 30px;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 500;
      }

      .p2 {
        font-size: 30px;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 700;
      }

      .p3 {
        color: rgb(102, 102, 102);
        font-size: 24px;
      }

      .gray {
        color: #999;
      }

      .red {
        color: rgb(246, 69, 93);

      }

      .green {
        color: rgb(45, 189, 133);
      }
    }
  }
}
</style>
